<template>
 <div class="layout-padding">
     <div class="layout-padding-auto layout-padding-view">
        <Header :title="t('aigcChat.chatAssistant')" @reload="fetch"/>
        <div class="flex flex-col w-full overflow-hidden" style="height: calc(100vh - 180px)">
            <main ref="contentRef" class="flex-1 overflow-hidden overflow-y-auto">
                <Chat />
            </main>
        </div>
     </div>
  </div>
</template>

<script lang="ts" setup>
    import {useI18n} from 'vue-i18n';
    import {getMessages} from '/@/api/aigc/chat';
    import {useUserInfo} from '/@/stores/userInfo';
    import {useChatStore} from '/@/stores/aigc/chatStore';
    import { useMessage } from '/@/hooks/message';

    const Header = defineAsyncComponent(() => import('./header.vue'));
    const Chat = defineAsyncComponent(() => import('./chat.vue'));

    const { t } = useI18n();
    const userStore = useUserInfo();
    const chatStore = useChatStore();
    const loading = ref(true);
    const contentRef = ref();
    //避免获取不到值
    const chatAssistance=()=>{
        return t('chat.chatAssistant');
    };
    onMounted(() => {
        fetch();
    });
    // 加载聊天记录
    const fetch = async () => {
        loading.value = true;
        let userId = userStore.userInfos?.user?.userId;
        chatStore.conversationId=userId;
        await getMessages(userId).then((res) => {
            if(res.success){
                chatStore.messages= res.data;
            }
        }).catch((err) => {
            console.log(err);
            useMessage().error(err);
        }).finally(() => {
            loading.value = false;
        });
    };

</script>